<template>
  <div id="order"></div>
</template>

<script>
  import data from '../../../apiData/dashboard/order.js'
  export default {
    name: "order",
    props: {
      index: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        myChart: null,
        data_index: 0,
        total_data: [],
        data: {}
      }
    },
    watch: {
      data_index: {
        handler(newValue) {
          this.data = data[newValue];
          this.$nextTick(() => {
            this.drawChart();
          });
        },
        immediate: true
      }
    },
    created() {
      this.getData(0);
    },
    mounted() {
      window.onresize = () => (() => {
        this.drawChart();
      })();
    },
    methods: {
      getData(index) {
        this.data_index = index;
      },
      drawChart() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart !== null && this.myChart !== '' && this.myChart !== undefined) {
          this.myChart.dispose();  // 销毁
        }
        this.myChart = this.$echarts.init(document.getElementById('order'));
        // 绘制图表
        const colors = ['#5bc5fc', '#91CC75'];
        let option = {
          color: colors,
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            }
          },
          legend: {
            data: this.data.legend
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: { interval: 0, rotate: 30 },
              data: this.data.xAxis
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额',
              position: 'left',
              max: this.data.yAxis.maxprice,
              min: 0,
              axisLabel: {
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(102,102,102,0.2)'
                }
              }
            },
            {
              type: 'value',
              name: '数量',
              position: 'right',
              splitLine: {
                show: false
              },
              max: this.data.yAxis.maxnum,
              min: 0,
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: this.data.series
        };
        option && this.myChart.setOption(option);
      },
    }
  }
</script>

<style scoped lang="scss">
  #order {
    width: 100%;
    height: 440px;
  }
</style>
